<!--demo1
<script setup>
import NumberCom from './NumberCom.vue';
</script>

<template>
  <div>
    <count-com></count-com>
    <count-com/>
  </div>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>
<script>
</script>
<style scoped>
</style>-->


<!--demo2
<template>
  <div>
    <NumberCom/>
    <NumberCom/>
  </div>
</template>
<script>
import NumberCom from "./NumberCom.vue"
export default {
  components:{
    NumberCom
  },
}
</script>

<style scoped>

</style>-->


<!--<template>
  <div>
    <HelloCom name="Jim"></HelloCom>
    <HelloCom name="Lily"></HelloCom>
    <HelloCom name="Bob"></HelloCom>
  </div>
</template>
<script>
import HelloCom from"./components/HelloCom.vue";
export default{
  components:{
    HelloCom,
  },
};
</script>
<style scoped>
</style>-->


<!----<template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1"/>ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2"/>ActiveCom2
    <component :is="activeComponent"></component>
  </div>
</template>
<script>
import ActiveCom1 from"./components/ActiveCom1.vue";
import ActiveCom2 from"./components/ActiveCom2.vue";
export default{
  data(){
    return{
      activeComponent:"ActiveCom2",
    };
  },
  components:{
    ActiveCom1,
    ActiveCom2,
  }
};
</script>
<style scoped>
</style>-->


<!--<template>
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyncCom></AsyncCom>
      </template>
      <template v-slot:fallback>
        <h2>LOADING......</h2>
      </template>
    </Suspense>
  </div>
</template>
<script>
import{defineAsyncComponent} from'vue'
const AsyncCom=defineAsyncComponent(
  ()=>import("./components/HelloCom2.vue")
)
export default{
  components:{
    AsyncCom
  }
}
</script>
<style scoped>
</style>-->


<!--<template>
  <div>
    <button @click="currentTab = 'Tab1'">音乐</button>
    <button @click="currentTab = 'Tab2'">视频</button>
    <button @click="currentTab = 'Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Tab1 from "./components/TabCom1.vue";
import Tab2 from "./components/TabCom2.vue";
import Tab3 from "./components/TabCom3.vue";
export default{
  data(){
    return{
      currentTab: "Tab1",
    };
  },
  components:{
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>
<style scoped>
</style>-->


<!--<template>
  <div>
    <ChildCom msg="Hello,I am dad!"></ChildCom>
  </div>
</template>
<script>
import ChildCom from"./components/ChildCom.vue"
export default{
  components:{
    ChildCom
  }
};
</script>
<style scoped>
</style>-->


<!--<template lang="">
  <div>
    <ChildCom :name="name" :age="age"></ChildCom>
  </div>
</template>
<script>
import ChildCom from "./components/ChildCom.vue"
export default {
  data(){
    return{
      name:'Jim',
      age: [],
      gender:'',
      hobby:[]
    }
  },
  components:{
    ChildCom
  }
};
</script>
<style lang="">
  
</style>-->


<!-- <template>
  <div>
    <ChildCom1 :name="name" :age="age"></ChildCom1>
    <MyCom1 :parentMsg="msg"></MyCom1>
    <MyCom2 :childWidth="width"></MyCom2>
  </div>
</template>

<script>
import ChildCom1 from "./components/ChildCom.vue";
import MyCom1 from "./components/MyCom1.vue"
import MyCom2 from "./components/MyCom2.vue"
  export default{
    data() {
      return {
        name:'Jim',
        age:[],
        gender:'',
        hobby:[],
        width:400,
        msg:'父组件的msg'
      }
    },
    components:{
      ChildCom1,
      MyCom1,
      MyCom2,
    }
  }
</script>
<style scoped></style> -->


<!-- <template>
  <div>
    <ChildCom @score="scoreHandler"></ChildCom>
  </div>
</template>
<script>
import ChildCom from"./components/ChildCom3.vue";
export default{
  components:{
    ChildCom
  },
methods:{
  scoreHandler(arg1,arg2){
    console.log(arg1,arg2);
  }
}
};
</script> -->


<!-- <template>
  <div>
    <ChildCom4 ref="childRef"></ChildCom4>
    <button @click="sendMessage">Send Message To Child</button>
  </div>
</template>
<script>
import ChildCom4 from'./components/ChildCom4.vue';
export default{
  components:{
    ChildCom4
  },
  methods:{
    sendMessage(){
      this.$refs.childRef.receiveMessage('Hello from parent');
    }
  }
};
</script> -->


<!-- <template>
  <div>
    <ChildCom7 v-model="msg"/>{{ msg }}
  </div>
</template>
<script>
import ChildCom7 from"./components/ChildCom7.vue";
export default{
  data(){
    return{
      msg:''
    }
  },
  components:{
    ChildCom7
  }
};
</script>
<style>
</style> -->


<template>
  <div>
    <ChildCom8></ChildCom8>
  </div>
</template>
<script>
import ChildCom8 from"./components/ChildCom8.vue";
export default{
  components:{
    ChildCom8
  },
  provide:{
    message:'Hello from parent'
  }
};
</script>